<template>
  <div class="danmaku-input">
    <h1>发送弹幕</h1>
    <div class="input-container">
      <input 
        v-model="content" 
        type="text" 
        placeholder="输入弹幕内容"
        @keyup.enter="sendDanmaku"
      >
      <div class="color-picker">
        <div 
          v-for="color in colors" 
          :key="color"
          :style="{ backgroundColor: color }"
          :class="{ active: selectedColor === color }"
          @click="selectedColor = color"
          class="color-option"
        ></div>
      </div>
      <button @click="sendDanmaku" :disabled="!content || isSubmitting">{{ isSubmitting ? '发送中...' : '发送' }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { io } from 'socket.io-client'
import axios from 'axios'

const content = ref('')
const selectedColor = ref('#ffffff')
const socket = io('/')
const isSubmitting = ref(false) // 添加状态变量

const colors = [
  '#ffffff',
  '#ff0000',
  '#00ff00',
  '#0000ff',
  '#ffff00',
  '#ff00ff',
  '#00ffff'
]

const sendDanmaku = async () => {
  
  if (!content.value||isSubmitting.value) return
  
  isSubmitting.value = true

  try {
    // 使用相对路径发送HTTP请求
    await axios.post('/api/danmaku/send', {
      content: content.value,
      color: selectedColor.value
    })
    
    // 清空输入
    content.value = ''
  } catch (error) {
    console.error('发送弹幕失败:', error)
    alert('发送弹幕失败：' + (error.response?.data?.message || error.message))
  }finally{
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.danmaku-input {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #1a1a1a;
}

h1 {
  color: #fff;
  margin-bottom: 30px;
}

.input-container {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
}

.color-picker {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

.color-option.active {
  border-color: #fff;
}

button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background: #45a049;
}

button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}
</style> 